﻿HmJS.$Import('util.dom.VisibilityWatcher');
//HmJS.$Import('core.domready');
HmJS.$Import('core.fx.transitions');
HmJS.$Import('core.fx.tween');

HmJS.register('demo.module.util.dom.visibilitywatcher', function ($ns) {
	var that = {};

	var VisibilityWatcher = $ns.util.dom.VisibilityWatcher;

	that.todo1 = function () {
		var extender = $('extender');
		extender.store('visibilityWatcher', new VisibilityWatcher(extender, {
			'enteredscreen': function () {
				var newcontent = new Element('h2', { html: 'My new little text #' + newparagraphnumber++ });
				newcontent.inject(extender, 'before');
				newcontent = document.id('textsource').clone(true, false);
				newcontent.inject(extender, 'before');
			}
		}));
	};

	that.todo2 = function () {
		new VisibilityWatcher('watched', {
			'enteredscreen': function () { document.id('header5status').addClass("visible").set('html', 'paragraph header 5 is visible  (detected by polling)'); },
			'leftscreen': function () { document.id('header5status').removeClass("visible").set('html', 'paragraph header 5 is not visible  (detected by polling)'); }
		},
			{
				'poll_interval': 500,
				'method': 'poll'
			});

		new VisibilityWatcher('watched', {
			'enteredscreen': function () { document.id('header5status2').addClass("visible").set('html', 'paragraph header 5 is visible (detected by event)'); },
			'leftscreen': function () { document.id('header5status2').removeClass("visible").set('html', 'paragraph header 5 is not visible  (detected by event)'); }
		});

		/* multiple detection */
		new VisibilityWatcher($$('h2'), {
			'enteredscreen': function (el) { document.id('headerstatus').set('html', 'paragraph header ' + el.get('html') + ' is visible (multiple detection)'); }
		});
	};

	var bouncer = function () {
		$('flyer').set('tween', { duration: 5000, transition: Fx.Transitions.Linear, link: 'chain' });
		$('flyer').tween('top', 1200).tween('top', -120);
	};

	that.todo3 = function () {
		bouncer.periodical(12000);
		bouncer();

		var flyer = $('flyer');
		flyer.store('visibilityWatcher', new VisibilityWatcher(flyer,
			{
				'enteredscreen': function () { document.id('status').set('html', ':) Hello Buddy !'); },
				'leftscreen': function () { document.id('status').set('html', ':O Hey! Come back !'); }
			},
			{
				'poll_interval': 500, 'method': 'poll'
			}));
	};

	return that;
});
